88:I[903690,["/chat-static/_next/static/chunks/14o7mx00c0d_j.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/393dq-lwgv9wd.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/0_iottws11i1k.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/1v3tu-ayeqrg_.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/24itveg68o90k.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3cbx1w3tl_otg.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2_vvxgls65u3z.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3xsve9e9fxw9u.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/00hzog-_vfdpw.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2ir8jf7_bfjoy.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3kl3thuqyhpdu.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3dh9b5rhes-_3.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2lpc1gu9jkwbr.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/0iiz89c_kj-81.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3qbqqz-30yf_e.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/349enaxmn4q3i.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2oig3hoirmj64.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2nnss2enfb-e6.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3lm48l9jlz-7e.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2ggwzd8njvoeu.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3kx42pcdprjxa.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/0i5jiecfjfl78.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2iu_2gtqlb9fh.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3ot6rcyapaof_.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2ghp3isp5v37c.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/1yuyyo11mati5.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3_phzuami-4lq.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/328rgsa_b-s69.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2ffzcp23_gird.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3ahsd2taw-yce.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3qfotjwoly3jt.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/02pa31waoa745.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/20r8bqclcqlhz.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/0ite474mxrjfz.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/0l0_hjemd4bbt.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2apqu_n39xv99.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2xscq3zmksssz.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp"],"ExplicitChatIdProvider"] 89:I[838238,["/chat-static/_next/static/chunks/14o7mx00c0d_j.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/393dq-lwgv9wd.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/0_iottws11i1k.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/1v3tu-ayeqrg_.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/24itveg68o90k.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3cbx1w3tl_otg.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2_vvxgls65u3z.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3xsve9e9fxw9u.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/00hzog-_vfdpw.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2ir8jf7_bfjoy.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3kl3thuqyhpdu.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3dh9b5rhes-_3.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2lpc1gu9jkwbr.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/0iiz89c_kj-81.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3qbqqz-30yf_e.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/349enaxmn4q3i.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2oig3hoirmj64.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2nnss2enfb-e6.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3lm48l9jlz-7e.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2ggwzd8njvoeu.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3kx42pcdprjxa.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/0i5jiecfjfl78.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2iu_2gtqlb9fh.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3ot6rcyapaof_.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2ghp3isp5v37c.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/1yuyyo11mati5.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3_phzuami-4lq.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/328rgsa_b-s69.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2ffzcp23_gird.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3ahsd2taw-yce.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3qfotjwoly3jt.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/02pa31waoa745.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/20r8bqclcqlhz.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/0ite474mxrjfz.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/0l0_hjemd4bbt.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2apqu_n39xv99.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2xscq3zmksssz.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp"],"SWRDataProvider"] 8c:I[589831,["/chat-static/_next/static/chunks/14o7mx00c0d_j.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/393dq-lwgv9wd.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/0_iottws11i1k.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/1v3tu-ayeqrg_.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/24itveg68o90k.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3cbx1w3tl_otg.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2_vvxgls65u3z.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3xsve9e9fxw9u.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/00hzog-_vfdpw.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2ir8jf7_bfjoy.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3kl3thuqyhpdu.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3dh9b5rhes-_3.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2lpc1gu9jkwbr.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/0iiz89c_kj-81.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3qbqqz-30yf_e.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/349enaxmn4q3i.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2oig3hoirmj64.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2nnss2enfb-e6.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3lm48l9jlz-7e.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2ggwzd8njvoeu.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3kx42pcdprjxa.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/0i5jiecfjfl78.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2iu_2gtqlb9fh.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3ot6rcyapaof_.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2ghp3isp5v37c.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/1yuyyo11mati5.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3_phzuami-4lq.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/328rgsa_b-s69.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2ffzcp23_gird.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3ahsd2taw-yce.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3qfotjwoly3jt.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/02pa31waoa745.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/20r8bqclcqlhz.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/0ite474mxrjfz.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/0l0_hjemd4bbt.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2apqu_n39xv99.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2xscq3zmksssz.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp"],"TemplateImage"] 8d:I[507037,["/chat-static/_next/static/chunks/14o7mx00c0d_j.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/393dq-lwgv9wd.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/0_iottws11i1k.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/1v3tu-ayeqrg_.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/24itveg68o90k.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3cbx1w3tl_otg.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2_vvxgls65u3z.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3xsve9e9fxw9u.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/00hzog-_vfdpw.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2ir8jf7_bfjoy.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3kl3thuqyhpdu.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3dh9b5rhes-_3.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2lpc1gu9jkwbr.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/0iiz89c_kj-81.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3qbqqz-30yf_e.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/349enaxmn4q3i.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2oig3hoirmj64.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2nnss2enfb-e6.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3lm48l9jlz-7e.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2ggwzd8njvoeu.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3kx42pcdprjxa.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/0i5jiecfjfl78.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2iu_2gtqlb9fh.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3ot6rcyapaof_.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2ghp3isp5v37c.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/1yuyyo11mati5.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3_phzuami-4lq.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/328rgsa_b-s69.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2ffzcp23_gird.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3ahsd2taw-yce.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/3qfotjwoly3jt.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/02pa31waoa745.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/20r8bqclcqlhz.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/0ite474mxrjfz.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/0l0_hjemd4bbt.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2apqu_n39xv99.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp","/chat-static/_next/static/chunks/2xscq3zmksssz.js?dpl=dpl_ApFFZGtKjLqFr6jDpybbBy9CVKpp"],"PrefetchLinkAndRefreshOnHover"] 8a:T3117,[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import { TriangleGridBackground } from "@/components/triangle-grid-background" export default function Home() { return (

Interactive Triangle Grid

Move your mouse around to see the triangles respond with smooth spring-like animations. Use the controls to adjust the behavior!

) } [V0_FILE]typescriptreact:file="components/triangle-grid-background.tsx" isEdit="true" "use client" import { useEffect, useRef, useCallback, useState } from "react" interface Triangle { x: number y: number originalX: number originalY: number vx: number vy: number } interface Config { triangleSize: number spacing: number fillOpacity: number strokeOpacity: number strokeWidth: number springStrength: number damping: number maxDistance: number pushForce: number } interface InteractionSource { x: number y: number radius: number force: number } export function TriangleGridBackground() { const canvasRef = useRef(null) const animationRef = useRef() const trianglesRef = useRef([]) const mouseRef = useRef({ x: 0, y: 0 }) const interactionSourcesRef = useRef([]) const isDarkMode = useRef(false) const [config, setConfig] = useState({ triangleSize: 20, spacing: 40, fillOpacity: 0.05, strokeOpacity: 0.15, strokeWidth: 1, springStrength: 0.02, damping: 0.85, maxDistance: 120, pushForce: 0.8, }) const checkDarkMode = useCallback(() => { isDarkMode.current = document.documentElement.classList.contains("dark") }, []) const createTriangles = useCallback( (width: number, height: number) => { const triangles: Triangle[] = [] const cols = Math.ceil(width / config.spacing) + 2 const rows = Math.ceil(height / config.spacing) + 2 for (let row = 0; row < rows; row++) { for (let col = 0; col < cols; col++) { const x = col * config.spacing - config.spacing const y = row * config.spacing - config.spacing triangles.push({ x, y, originalX: x, originalY: y, vx: 0, vy: 0, }) } } trianglesRef.current = triangles }, [config.spacing], ) const drawTriangle = useCallback( (ctx: CanvasRenderingContext2D, x: number, y: number, size: number, fillColor: string, strokeColor: string) => { const height = (size * Math.sqrt(3)) / 2 ctx.beginPath() ctx.moveTo(x, y - height / 2) ctx.lineTo(x - size / 2, y + height / 2) ctx.lineTo(x + size / 2, y + height / 2) ctx.closePath() ctx.fillStyle = fillColor ctx.fill() ctx.strokeStyle = strokeColor ctx.lineWidth = config.strokeWidth ctx.stroke() }, [config.strokeWidth], ) const animate = useCallback(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return ctx.clearRect(0, 0, canvas.width, canvas.height) const interactionElements = document.querySelectorAll("[data-triangle-interaction]") const newSources: InteractionSource[] = [] interactionElements.forEach((element) => { const rect = element.getBoundingClientRect() const canvasRect = canvas.getBoundingClientRect() newSources.push({ x: rect.left + rect.width / 2 - canvasRect.left, y: rect.top + rect.height / 2 - canvasRect.top, radius: Math.max(rect.width, rect.height) * 0.8, force: 0.6, }) }) interactionSourcesRef.current = newSources trianglesRef.current.forEach((triangle) => { let totalForceX = 0 let totalForceY = 0 // Mouse interaction const mouseDx = mouseRef.current.x - triangle.x const mouseDy = mouseRef.current.y - triangle.y const mouseDistance = Math.sqrt(mouseDx * mouseDx + mouseDy * mouseDy) if (mouseDistance < config.maxDistance && mouseDistance > 0) { const force = (config.maxDistance - mouseDistance) / config.maxDistance totalForceX += -(mouseDx / mouseDistance) * force * config.pushForce totalForceY += -(mouseDy / mouseDistance) * force * config.pushForce } // UI element interactions interactionSourcesRef.current.forEach((source) => { const dx = source.x - triangle.x const dy = source.y - triangle.y const distance = Math.sqrt(dx * dx + dy * dy) if (distance < source.radius && distance > 0) { const force = (source.radius - distance) / source.radius totalForceX += -(dx / distance) * force * source.force totalForceY += -(dy / distance) * force * source.force } }) triangle.vx += totalForceX triangle.vy += totalForceY const springX = (triangle.originalX - triangle.x) * config.springStrength const springY = (triangle.originalY - triangle.y) * config.springStrength triangle.vx += springX triangle.vy += springY triangle.vx *= config.damping triangle.vy *= config.damping triangle.x += triangle.vx triangle.y += triangle.vy }) checkDarkMode() const fillColor = isDarkMode.current ? `rgba(255, 255, 255, ${config.fillOpacity})` : `rgba(0, 0, 0, ${config.fillOpacity})` const strokeColor = isDarkMode.current ? `rgba(255, 255, 255, ${config.strokeOpacity})` : `rgba(0, 0, 0, ${config.strokeOpacity})` trianglesRef.current.forEach((triangle) => { drawTriangle(ctx, triangle.x, triangle.y, config.triangleSize, fillColor, strokeColor) }) animationRef.current = requestAnimationFrame(animate) }, [config, drawTriangle, checkDarkMode]) const handleMouseMove = useCallback((event: MouseEvent) => { const canvas = canvasRef.current if (!canvas) return const rect = canvas.getBoundingClientRect() mouseRef.current = { x: event.clientX - rect.left, y: event.clientY - rect.top, } }, []) const handleResize = useCallback(() => { const canvas = canvasRef.current if (!canvas) return const { innerWidth, innerHeight } = window canvas.width = innerWidth canvas.height = innerHeight createTriangles(innerWidth, innerHeight) }, [createTriangles]) useEffect(() => { const canvas = canvasRef.current if (!canvas) return handleResize() window.addEventListener("resize", handleResize) window.addEventListener("mousemove", handleMouseMove) canvas.addEventListener("mousemove", handleMouseMove) animate() return () => { window.removeEventListener("resize", handleResize) window.removeEventListener("mousemove", handleMouseMove) canvas.removeEventListener("mousemove", handleMouseMove) if (animationRef.current) { cancelAnimationFrame(animationRef.current) } } }, [handleResize, handleMouseMove, animate]) const presets = { gentle: { ...config, pushForce: 0.3, maxDistance: 80, springStrength: 0.015, damping: 0.9, }, energetic: { ...config, pushForce: 1.2, maxDistance: 150, springStrength: 0.03, damping: 0.8, }, subtle: { ...config, pushForce: 0.5, maxDistance: 60, springStrength: 0.01, damping: 0.95, fillOpacity: 0.02, strokeOpacity: 0.08, }, } const applyPreset = (presetName: keyof typeof presets) => { setConfig(presets[presetName]) } return ( <>

Interactive Triangle Grid

Triangle Controls

About

Tags

Share

About

Tags

Share

More from fryad

More Templates Like This